import React, { Component } from "react";

class App extends Component {
  state = {
    count: 1,
  };

  // fn = (n) => {
  //   this.setState((prevState) => {
  //     return {
  //       count: prevState.count + n,
  //     };
  //   });
  // };

  // 柯里化函数
  fn = (n) => () => {
    this.setState((prevState) => {
      return {
        count: prevState.count + n,
      };
    });
  };

  /*
    事件如果直接加括号来传参，会使得函数自执行

    1. 内联地使用bind的方式
    bind函数会产生新函数，新函数不会自动执行，bind的第二个参数会作为新函数的第一个参数
    不推荐的，bind产生新函数会消耗内存

    2. 内联地套一层箭头函数
    点击的时候触发外层函数，里层自执行
    比较推荐

    3. 使用柯里化的函数的方式
    外层自动执行，里层点击后执行
    推荐
  */

  render() {
    return (
      <>
        <h2>事件传参</h2>
        <p>count: {this.state.count}</p>
        {/* <button onClick={this.fn.bind(this, 2)}>btn + 2</button>
        <button onClick={this.fn.bind(this, 3)}>btn + 3</button> */}

        {/* <button onClick={() => this.fn(2)}>btn + 2</button>
        <button onClick={() => this.fn(3)}>btn + 3</button> */}

        <button onClick={this.fn(2)}>btn + 2</button>
        <button onClick={this.fn(3)}>btn + 3</button>
      </>
    );
  }
}

export default App;
